import { Canvas, Controls, Meta, Source } from '@storybook/blocks'

import * as ButtonStories from './button.stories'

<Meta of={ButtonStories} />

# Button

Displays a button or a component that looks like a button.

## Preview

<Canvas of={ButtonStories.Outline} />

<Controls of={ButtonStories.Outline} />

## Usage

export const importCode = `import { Button } from "@orbitkit/ui/button";`

export const usageCode = `<Button variant="outline">Button</Button>`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />

## Helper

You can use the `buttonVariants` helper to create a link that looks like a button.

export const linkImportCode = `import { buttonVariants } from "@orbitkit/ui/button";`

<Source code={linkImportCode} language='ts' dark />

export const linkUsageCode = `<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>`

<Source code={linkUsageCode} language='tsx' dark />

Alternatively, you can set the `asChild` parameter and nest the link component.

export const asChildCode = `<Button asChild>
  <Link href="/login">Login</Link>
</Button>`

<Source code={asChildCode} language='tsx' dark />

## Examples

### Primary

<Canvas of={ButtonStories.Primary} />

### Secondary

<Canvas of={ButtonStories.Secondary} />

### Destructive

<Canvas of={ButtonStories.Destructive} />

### Outline

<Canvas of={ButtonStories.Outline} />

### Ghost

<Canvas of={ButtonStories.Ghost} />

### Link

<Canvas of={ButtonStories.Link} />

### Icon

<Canvas of={ButtonStories.Icon} />

### With Icon

<Canvas of={ButtonStories.WithIcon} />

### Loading

<Canvas of={ButtonStories.Loading} />
